<template>
  <div style="background-color: #f4f4f4" id="app">
      <el-menu :default-active="active"
               mode="horizontal"
               background-color="#ADB3FB"
               text-color="#fff"
               active-text-color="2B2B2B"
               router
               v-if="isLogin">

        <el-menu-item class="img-item"><img src="../src/assets/img/logo_white.png" style="width: 160px"></el-menu-item>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/demands">需求</el-menu-item>
        <el-menu-item index="/newWork">新作</el-menu-item>
        <el-menu-item index="/hotWork">热门</el-menu-item>
        <el-menu-item index="/authors">作者</el-menu-item>
        <el-menu-item class="user" @click="logoutHandler"> 退出登录</el-menu-item>
        <el-menu-item class="user" index="/demandsRelease">发布需求</el-menu-item>
        <el-menu-item class="user" index="/MyLikes">
          <img class="user-avatar" :src="user.userImg">
        </el-menu-item>

        <el-menu-item class="input-search">
          <input @keyup.enter="search(searchText)" type="text" autocomplete="off" placeholder="输入你要找的作品或作者" v-model="searchText" class="el-input__inner">
          <i class="el-icon-search" @click="search(searchText)"></i>
        </el-menu-item>

      </el-menu>

      <el-menu :default-active="active"
               mode="horizontal"
               class="el-menu-demo"
               background-color="#ADB3FB"
               text-color="#fff"
               active-text-color="2B2B2B"
               router
               v-else>
        <el-menu-item class="img-item"><img src="../src/assets/img/logo_white.png" style="width: 160px"></el-menu-item>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/demands">需求</el-menu-item>
        <el-menu-item index="/newWork">新作</el-menu-item>
        <el-menu-item index="/hotWork">热门</el-menu-item>
        <el-menu-item index="/authors">作者</el-menu-item>
        <el-menu-item class="user" @click="register">免费注册</el-menu-item>
        <el-menu-item class="user" @click="loginHandler">登录</el-menu-item>
        <el-menu-item class="search-input input-search">
          <input @keyup.enter="search(searchText)" type="text" autocomplete="off" placeholder="输入你要找的作品或作者" v-model="searchText" class="el-input__inner">
          <i class="el-icon-search" @click="search(searchText)"></i>
        </el-menu-item>
      </el-menu>

    <router-view/>



    <back/>
    </div>



</template>

<script>
  import {logout, selectUser} from "./assets/api/userApi";
  import Back from "./components/BackTop";
  export default {
    components: {Back},
    data() {
      return {
        active: "/",
        user: {
          username: "",
          token: "",
          userImg: ""
        },
        isLogin: false,
        searchText:'',
      }
    },
    methods: {
      logoutHandler() {
        logout(this.user).then((res) => {
          this.isLogin = false;
          localStorage.setItem('token',"")
          this.$router.replace("/login");
        });
      },
      getUserAvatar() {
        let data = {}
        data.userId = localStorage.userId;
        selectUser(data).then((res) => {
          this.user.userImg = res.data.userImg;
        })
      },
      loginHandler() {
        this.$router.push("/login");
      },
      register() {
        this.$router.push("/login");
      },
      personalCenter() {
        this.$router.push("/personalCenter");
      },
      search(searchText){
        if (!searchText){
          return;
        }
        else {
          this.$router.push({path:'/searchPage',query:{searchText:searchText}});
        }
      },

    },
    // watch: {
    //   '$route': function(){
    //     location.reload();
    //   }
    // },
    created() {
      if (localStorage.token) {
        this.isLogin = true;
        this.getUserAvatar()
      }
    }
  }

</script>
<style>
  @import "assets/css/amazeui.css";

  .user {
    float: right !important;
    margin-right: 20px !important;
    line-height: 60px !important;
  }

  .user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 100%;
  }

  .input-search {
    float: right !important;
    margin-right: 60px !important;
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 30%;
  }

  .el-input__inner {
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  userImg {
    margin-right: 16px;
    margin-top: calc((48px - 32px) / 2);
    transition: all .2s ease-out;
    transform-origin: top center;
  }

  .el-menu-demo{
    height: 60px;
    margin-bottom: 0;
    transition: .5s;
    background-color: #adb3fb;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    padding: 0 30px 0 40px;
    border-bottom: 1px solid #ececec;
  }
  .img-item{
    width: 200px;
  }
</style>
